<template>
  <div class="checkbox-card-container">
    <BaseCheckboxGroupCard v-bind="$attrs">
      <template #default="{ row }">
        <div class="checkbox-card">
          <i class="checkbox-card__icon" :class="`checkbox-card__icon--${row.icon}`" />
          <div class="checkbox-card__info">
            <p class="checkbox-card__info__name">{{ row.name }}</p>
            <p class="checkbox-card__info__count">¥{{ row.count }}</p>
          </div>
          <div class="checkbox-card__ratio">
            <p class="checkbox-card__ratio__label">环比</p>
            <p class="checkbox-card__ratio__value" :class="row.ratioType==='down'?'checkbox-card__ratio__value--down':''">
              {{ row.ratio }}
            </p>
          </div>
        </div>
      </template>
    </BaseCheckboxGroupCard>
  </div>
</template>
<script lang="ts" setup>
import { BaseCheckboxGroupCard } from '@/components/base-form';
defineOptions({
  name: 'CheckBoxCard',
  inheritAttributes: false
});

</script>
<style lang="scss" scoped>
.checkbox-card {
  display: flex;
  justify-content: space-between;

  &__icon {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    padding: 12px;
    background: #fff url('@images/kgj/icon-sale.png') no-repeat center center;
    background-size: 30px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgb(64 158 255 / 6%);
    &--sale {background-image: url('@images/kgj/icon-sale.png');}

    &--order {
      background-image: url('@images/kgj/icon-order.png');
    }

    &--customer {
      background-image: url('@images/kgj/icon-customer.png');
    }

    &--renewal {
      background-image: url('@images/kgj/icon-renewal.png');
    }

    // 无hover图标
    &--visitor {
      background-image: url('@images/kgj/icon-visitor.png');
    }

    &--active-user {
      background-image: url('@images/kgj/icon-active-user.png');
    }

    &--visit-page {
      background-image: url('@images/kgj/icon-visit-page.png');
    }

    &--duration {
      background-image: url('@images/kgj/icon-duration.png');
    }

    &--ip {
      background-image: url('@images/kgj/icon-ip.png');
    }
  }

  &__info {
    flex: 1;
    margin: 0 12px;

    &__name {
      height: 22px;
      font-size: 13px;
      font-weight: 400;
      line-height: 22px;
      color: #a8abb2;

    }

    &__count {
      height: 24px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #4975e9;
    }
  }

  &__ratio {
    width: 60px;
    text-align: right;

    &__label {
      height: 22px;
      font-size: 12px;
      font-weight: 400;
      line-height: 22px;
      color: #a8abb2;
      letter-spacing: -.01px;
    }

    &__value {
      height: 20px;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #F56C6C;
      letter-spacing: -.01px;

      &::after {
        display: inline-block;
        margin: -10px 0 0 6px;
        font-size: 14px;
        vertical-align: middle;
        content: '';
        border-color: transparent transparent #F56C6C;
        border-style: solid;
        border-width: 6px 4px;
      }

      &--down {
        color: #67C23A;

        &::after {
          margin-top: 6px;
          border-color: #67C23A transparent transparent;
        }
      }
    }

  }
}

:deep(.base-checkbox-group).has-checkbox {
  .el-checkbox {
    &.is-checked,
    &:hover {
      .checkbox-card {
        &__icon {
          &--sale {
            background-image: url('@images/kgj/icon-sale-hover.png');
          }

          &--order {
            background-image: url('@images/kgj/icon-order-hover.png');
          }

          &--customer {
            background-image: url('@images/kgj/icon-customer-hover.png');
          }

          &--renewal {
            background-image: url('@images/kgj/icon-renewal-hover.png');
          }
        }
      }
    }
  }
}
</style>
